<template>
  <div class="drgCase">
    <c-navigation>
      <c-time @change="timeChangeHandler"/>
    </c-navigation>
    <div class="drgCaseMain">
      <p class="topSelect">
        <span>参保类型</span>
        <a-select class="tableSelect" size="small">
          <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon"/>
          <a-select-option value="jack">
            Jack
          </a-select-option>
        </a-select>
        <span>医保类型</span>
        <a-select class="tableSelect" size="small">
          <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon"/>
          <a-select-option value="jack">
            Jack
          </a-select-option>
        </a-select>

        <span>结算类型</span>
        <a-select class="tableSelect" size="small">
          <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon"/>
          <a-select-option value="jack">
            Jack
          </a-select-option>
        </a-select>
      </p>
      <div class="middleNum">
        <div class="numOne">
          <p class="middleTitle">有DIP分组病例</p>
          <div>
            <div class="pMain">
              <p class="pNum">{{ formData.disGroupAllpoint }}<span> 万</span></p>
              <p class="pTitle">总点数</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ formData.disGroupCount }}</p>
              <p class="pTitle">病例数</p>
              <p class="ratiop">
                占比{{ formData.disGroupCount / (formData.disGroupCount + formData.disCount) | filterFixed }}%</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ formData.disGroupAllmoney }}<span> 万</span></p>
              <p class="pTitle">医疗总费用</p>
              <p class="ratiop">
                占比{{ formData.disGroupAllmoney / (formData.disGroupAllmoney + formData.allmoney) | filterFixed }}%</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum" :style="formData.disGroupSurplusmoney>0?'':'color:#E00703'">
                {{ formData.disGroupSurplusmoney }}<span> 万</span></p>
              <p class="pTitle">结余金额</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ (formData.disGroupSetmoney / formData.setmoney) | filterFixed }}%</p>
              <p class="pTitle">拨付比</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ formData.disGroupHighCount }}</p>
              <p class="pTitle">高倍率病例数</p>
              <p class="ratiop">
                占比{{ formData.disGroupHighCount / (formData.disGroupLowCount + formData.disGroupHighCount) | filterFixed }}%</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ formData.disGroupLowCount }}</p>
              <p class="pTitle">低倍率病例数</p>
              <p class="ratiop">
                占比{{ formData.disGroupLowCount / (formData.disGroupLowCount + formData.disGroupHighCount) | filterFixed }}%</p>
            </div>
          </div>
        </div>
        <div class="numTwo">
          <p class="middleTitle">其他病例</p>
          <div>
            <div class="pMain">
              <p class="pNum">{{ formData.disCount }}</p>
              <p class="pTitle">病例数</p>
              <p class="ratiop">
                占比{{ formData.disCount / (formData.disGroupCount + formData.disCount) | filterFixed }}%</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ formData.allmoney }}</p>
              <p class="pTitle">医疗总费用</p>
              <p class="ratiop">
                占比{{ formData.allmoney / (formData.disGroupAllmoney + formData.allmoney) | filterFixed }}%</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tableChoose">
        <div :class="['leftChoose',imgDeg==0?'':'leftChooseMore']">
          <a-input v-model="querystr" placeholder="按姓名、住院号、病案号、手术、诊断搜索" size="small" class="tableInput"/>
        </div>
        <div class="tableButton">
          <a-button class="reBack" @click="reback">
            重置
          </a-button>
          <a-button type="primary" @click="listSearch">
            搜索
          </a-button>
        </div>
      </div>
      <div class="table">
        <a-table :columns="columns"
                 :scroll="{ x: '1623px'}"
                 :rowKey="`${Math.random()}`"
                 class="custom" :data-source="data" :pagination="{total:total,pageSize:pageSize}"
                 @change="tableChange">
        </a-table>
        <!--<div class="tip" v-if="data.length==0">
            {{ `每页${pageSize}行 共${pages}页 总条数${total}` }}
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import RadioGroup from '@/components/radioGroup.vue'
import {list, getDiseaseGroupStat} from "@/api/wholeCollege";
import columns from "./columns.js";
import moment from "moment";

export default {
  name: "drgCase",
  components: {
    RadioGroup
  },
  data() {
    return {
      columns: [],
      data: [],
      imgDeg: 0,
      total: 1,
      pageNum: 1,
      pageSize: 7,
      timeParams: {
        year: moment().format('YYYY'),
        month: moment().format('MM')
      },
      querystr: null,
      formData: [],

    }
  },
  created() {
    this.columns = columns
  },
  mounted() {

  },
  filters: {
    filterFixed(msg) {
      if (isNaN(msg)) {
        return 0
      }
      return (msg * 100).toFixed(2)
    }
  },
  methods: {
    async getList() {
      const params = {...this.timeParams, querystr: this.querystr, pageSize: this.pageSize, pageNum: this.pageNum};
      const res = await list(params);
      if (res['data']) {
        console.log(res)
        this.data = res.data.list
        this.total = res.data.total
      }
    },
    async getGroupStat() {
      const params = {...this.timeParams};
      const res = await getDiseaseGroupStat(params);
      if (res['data']) {
        console.log(res)
        this.formData = res.data
      }
    },
    tableChange(e) {
      this.pageNum = e.current
      this.getList()
    },
    showMore() {
      this.imgDeg = this.imgDeg == 0 ? 180 : 0
    },
    timeChangeHandler(e) {
      this.timeParams = e;
      this.getList()
      this.getGroupStat()
      //this.reData();
    },
    reback() {
      this.querystr = null
    },
    listSearch() {
      this.getList()
    }
  }

}
</script>

<style lang="stylus" scoped>
.drgCaseMain {
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(25, 25, 26, 0.15), 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 12px;
  margin-top 20px;
}

.topSelect span {
  display inline-block;
  vertical-align top;
  font-size 12px;
  line-height: 24px;
  margin-right 10px;
}

.tableSelect {
  width: 120px;
  margin-right 20px;
  margin-bottom 12px
}

.seeDetail {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #4B82FB;
  text-align: right;
  float right
}

.middleNum {
  margin-top: 20px;
  margin-bottom 26px;
  display flex;
  height: 150px;
  box-sizing border-box;
  color: #484D78;
}

.middleTitle {
  font-family: PingFangSC-Medium;
  font-size 12px;
  color: #407CFC;
  line-height: 12px;
  position absolute;
  left: 20px;
  top: 15px;
}

.middleNum > div {
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 8px;
  display flex;
}

.middleNum .numOne {
  flex: 1 1 1220px;
  position relative;
}

.middleNum .numTwo {
  flex: 1 1 400px;
  margin-left: 20px;
  position relative;
}

.middleNum > div > div {
  flex: 1;
  text-align center;
}

.ratiop {
  font-size: 14px;
  color: #9295AF;
  line-height: 14px;
  margin-top 6px;
}

.pMain {
  display: inline-block;
  text-align left;
  padding-top: 48px;
}

.pNum {
  font-size: 28px;
  line-height: 28px;
}

.pNum span {
  font-size: 14px;
  line-height: 14px;
}

.pTitle {
  font-size: 14px;
  line-height: 14px;
  margin-top 6px;
}

.tableChoose {
  position: relative;
}

.leftChoose {
  height: 36px;
}

.tableInput {
  width: 300px;
  display inline-block;
  vertical-align top;
  font-size: 12px;
  color: #484D78;
}

.more {
  display inline-block;
  vertical-align top;
  font-size: 12px;
  color: #6190F7;
  line-height: 12px;
  margin-left 20px;
}

.arrowIcon {
  width: 14px;
  height: 14px;
  display inline-block;
  vertical-align middle;
  cursor pointe;
  transition 0.5s;
}

.tableButton {
  position: absolute;
  right: 0;
  top: 0;
  display inline-block;
}

.tableButton >>> .ant-btn {
  width: 80px;
  margin-left 10px;
  height: 24px;
  line-height 22px;
  font-size: 12px;
}

.reBack {
  background: #F7FAFF;
  border: 1px solid #548AFF;
  border-radius: 8px;
  border-radius: 8px;
  color: #2C7BFF;
}

.table {
  position: relative
}

.tip {
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 1;
  font-size: 10px;
  color: #0F1657;
}

.tableSelect {
  display: inline-block;
  vertical-align top;
}

>>> .ant-table-pagination.ant-pagination {
  margin: 10px 0
}

.ant-input {
  border: 1px solid #D8DCF7;
  border-radius: 8px;
}

.ant-select-open .arrowIcon {
  transform: rotate(180deg)
}
</style>
